Esri CSS Styling Overrides

When the Esri JS SDK doesn't allow as minute control to their styling that we need, as is frequently the case with legends which tend to contain too much unnecessary content, we need to override the default CSS styling. This document can help pinpoint CSS classes and HTML components to apply overriding CSS styling to.

Create the CSS File

Most of our React apps should have a root CSS file by default. If you have a lot of CSS content to customize, then it might be a good idea to create a dedicated esri-override.css file. In most cases, you can just use the default CSS file located at ./public/hydrotrek.css

Add the CSS File to index.html

1. Open the ./index.html file and navigate to the end of the <link> section.

2. Make sure the css is imported, or add it if not, with the line:

   <link rel="stylesheet" href="/hydrotrek.css" />

Common Overrides

Hide Cluster Count

/* NOTE: This is a hack to hide the "cluster count" section of the esri legend. */
/* This might cause issues with other legends! */
.esri-legend__layer > :nth-child(2) {
  visibility: hidden;
  display: none;
}

.esri-widget__heading.esri-legend__service-label {
  display: none;
}

.esri-legend__layer-table.esri-legend__layer-table--size-ramp > .esri-legend__layer-caption {
  display
}

Other Cluster Legend Changes

/*
Cluster Map Page Specific Legend Styling
This targets the Esri legend specifically on the cluster map page to make it narrower.
The selector uses the page title to ensure it only affects the cluster map page.
*/
.cluster-map-page .esri-legend,
#cluster-map-page .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/* Alternative approach using route-based targeting */
[data-path*="2d-cluster-map"] .esri-legend,
[data-route="2d-cluster-map"] .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Most specific approach: Target the legend when the page title contains "Cluster Map"
This uses the browser's document title to identify the specific page.
*/
body:has([title*="Cluster Map"]) .esri-legend,
body:has([title*="2D Cluster Map"]) .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Fallback approach: Target based on the specific route path
This will work if the URL contains "2d-cluster-map"
*/
body[data-current-route*="2d-cluster-map"] .esri-legend,
html[data-route*="2d-cluster-map"] .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Primary approach: Target the legend when the cluster map page is active
This uses the class added by the React component to the body element.
*/
body.cluster-map-page-active .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

Heatmap Legend Changes

/*
Heatmap Page Specific Legend Styling
This targets the Esri legend specifically on the heatmap page to make it narrower.
*/
.heatmap-page .esri-legend,
#heatmap-page .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/* Target the specific layer element that has the scroll badge */
.heatmap-page .esri-legend_layer,
#heatmap-page .esri-legend_layer {
  overflow: hidden !important;
  max-width: 115px !important;
}

/* Target the info cell that's causing the extra width */
.heatmap-page .esri-legend_layer-cell--info,
#heatmap-page .esri-legend_layer-cell--info {
  max-width: 80px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Target the ramp labels container */
.heatmap-page .esri-legend_ramp-labels,
#heatmap-page .esri-legend_ramp-labels {
  max-width: 80px !important;
  overflow: hidden !important;
}

/* Alternative approach using route-based targeting for heatmap */
[data-path*="heatmap"] .esri-legend,
[data-route="heatmap"] .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Most specific approach: Target the legend when the page title contains "Heatmap"
This uses the browser's document title to identify the specific page.
*/
body:has([title*="Heatmap"]) .esri-legend,
body:has([title*="2D Heatmap"]) .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Fallback approach: Target based on the specific route path for heatmap
This will work if the URL contains "heatmap"
*/
body[data-current-route*="heatmap"] .esri-legend,
html[data-route*="heatmap"] .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Primary approach: Target the legend when the heatmap page is active
This uses the class added by the React component to the body element.
*/
body.heatmap-page-active .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/* Target the specific layer element that has the scroll badge */
body.heatmap-page-active .esri-legend_layer {
  overflow: hidden !important;
  max-width: 115px !important;
}

/* Target the info cell that's causing the extra width */
body.heatmap-page-active .esri-legend_layer-cell--info {
  max-width: 80px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Target the ramp labels container */
body.heatmap-page-active .esri-legend_ramp-labels {
  max-width: 80px !important;
  overflow: hidden !important;
}

/* Heatmap page specific styling for legend cells */
body.heatmap-page-active .esri-legend__layer-cell.esri-legend__layer-cell--info {
  max-width: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  overflow: hidden !important;
}

body.heatmap-page-active .esri-legend__ramp-labels {
  max-width: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  overflow: hidden !important;
}

/* Fix for top label cutting off */
.esri-legend__ramp-label {
  margin-top: 5px !important;
}

All Overrides from DWD

Here's the entire CSS file from DWD as of 8/7/2025:

/* NOTE: This is a hack to hide the "cluster count" section of the esri legend. */
/* This might cause issues with other legends! */
.esri-legend__layer > :nth-child(2) {
  visibility: hidden;
  display: none;
}

.esri-widget__heading.esri-legend__service-label {
  display: none;
}

.esri-legend__layer-table.esri-legend__layer-table--size-ramp > .esri-legend__layer-caption {
  display: none;
}

/*
This section forces apexcharts menu to use black text.
This is required because otherwise the apexchart menus don't completely
adhere to our light/dark theming. The text changes color, but the
background doesn't.
*/
.apexcharts-menu-item {
  color: black;
}

/*
Cluster Map Page Specific Legend Styling
This targets the Esri legend specifically on the cluster map page to make it narrower.
The selector uses the page title to ensure it only affects the cluster map page.
*/
.cluster-map-page .esri-legend,
#cluster-map-page .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/* Alternative approach using route-based targeting */
[data-path*="2d-cluster-map"] .esri-legend,
[data-route="2d-cluster-map"] .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Most specific approach: Target the legend when the page title contains "Cluster Map"
This uses the browser's document title to identify the specific page.
*/
body:has([title*="Cluster Map"]) .esri-legend,
body:has([title*="2D Cluster Map"]) .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Fallback approach: Target based on the specific route path
This will work if the URL contains "2d-cluster-map"
*/
body[data-current-route*="2d-cluster-map"] .esri-legend,
html[data-route*="2d-cluster-map"] .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Primary approach: Target the legend when the cluster map page is active
This uses the class added by the React component to the body element.
*/
body.cluster-map-page-active .esri-legend {
  max-width: 175px !important;
  width: 175px !important;
}

/*
Heatmap Page Specific Legend Styling
This targets the Esri legend specifically on the heatmap page to make it narrower.
*/
.heatmap-page .esri-legend,
#heatmap-page .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/* Target the specific layer element that has the scroll badge */
.heatmap-page .esri-legend_layer,
#heatmap-page .esri-legend_layer {
  overflow: hidden !important;
  max-width: 115px !important;
}

/* Target the info cell that's causing the extra width */
.heatmap-page .esri-legend_layer-cell--info,
#heatmap-page .esri-legend_layer-cell--info {
  max-width: 80px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Target the ramp labels container */
.heatmap-page .esri-legend_ramp-labels,
#heatmap-page .esri-legend_ramp-labels {
  max-width: 80px !important;
  overflow: hidden !important;
}

/* Alternative approach using route-based targeting for heatmap */
[data-path*="heatmap"] .esri-legend,
[data-route="heatmap"] .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Most specific approach: Target the legend when the page title contains "Heatmap"
This uses the browser's document title to identify the specific page.
*/
body:has([title*="Heatmap"]) .esri-legend,
body:has([title*="2D Heatmap"]) .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Fallback approach: Target based on the specific route path for heatmap
This will work if the URL contains "heatmap"
*/
body[data-current-route*="heatmap"] .esri-legend,
html[data-route*="heatmap"] .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/*
Primary approach: Target the legend when the heatmap page is active
This uses the class added by the React component to the body element.
*/
body.heatmap-page-active .esri-legend {
  max-width: 115px !important;
  width: 115px !important;
  overflow: hidden !important;
}

/* Target the specific layer element that has the scroll badge */
body.heatmap-page-active .esri-legend_layer {
  overflow: hidden !important;
  max-width: 115px !important;
}

/* Target the info cell that's causing the extra width */
body.heatmap-page-active .esri-legend_layer-cell--info {
  max-width: 80px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Target the ramp labels container */
body.heatmap-page-active .esri-legend_ramp-labels {
  max-width: 80px !important;
  overflow: hidden !important;
}

/* Heatmap page specific styling for legend cells */
body.heatmap-page-active .esri-legend__layer-cell.esri-legend__layer-cell--info {
  max-width: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  overflow: hidden !important;
}

body.heatmap-page-active .esri-legend__ramp-labels {
  max-width: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  overflow: hidden !important;
}

/* Fix for top label cutting off */
.esri-legend__ramp-label {
  margin-top: 5px !important;
}